<template>
  <div class="preview-wrapper">
    <MdPreview :id="id" :modelValue="text" />
  </div>
  <MdCatalog
    :editorId="id"
    :scrollElement="scrollElement"
    class="catalog-fixed"
  />
</template>

<script setup>
import { ref, onMounted } from "vue";
import { session, api } from "src/boot/axios.js";
import { useQuasar } from "quasar";
import { MdPreview, MdCatalog } from "md-editor-v3";
import "md-editor-v3/lib/preview.css";
import notify from "src/utility/notify.js";
import { useRouter } from "vue-router";
const router = useRouter();

const $q = useQuasar();
const id = "preview-only";
const text = ref("# 预览加载中...");
const scrollElement = document.documentElement;

onMounted(async () => {
  $q.loading.show();

  const url = router.currentRoute.value.fullPath;
  console.log(url);
  try {
    const response = await api.get(url);
    text.value = response.data;
  } catch (ex) {
    if (ex.response !== undefined && ex.response.data.message) {
      notify.warn(ex.response.data.message);
    } else {
      notify.error(`博客加载失败: ` + ex.message);
      console.error(ex);
    }
  } finally {
    $q.loading.hide();
  }
});
</script>

<style scoped>
.preview-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers content horizontally */
  margin: 0 auto; /* Centers content container with auto margins */
  max-width: 800px; /* Sets a maximum width for better readability */
  width: 100%; /* Ensures it takes full width up to the max-width */
  padding: 20px; /* Adds some padding for spacing */
  box-sizing: border-box; /* Ensures padding doesn't affect total width */
}

.catalog-fixed {
  position: fixed; /* Fix the position relative to the viewport */
  top: 20px; /* Distance from the top of the viewport */
  right: 20px; /* Distance from the right edge of the viewport */
  z-index: 1000; /* Higher z-index to ensure it overlays other content */
  background: #fff; /* Optional: background color for better readability */
  padding: 10px; /* Optional: Add some padding */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
}
</style>
